<template>
  <div id="demo">
    <input v-model="query" />
    <transition-group
      tag="ul"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li
        v-for="(item, index) in computedList"
        :key="item.msg"
        :data-index="index"
      >
        {{ item.msg }}
      </li>
    </transition-group>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import gsap from "gsap";
const query = ref("");
const list = ref([
  { msg: "Bruce Lee" },
  { msg: "Jackie Chan" },
  { msg: "Chuck Norris" },
  { msg: "Jet Li" },
  { msg: "Kung Fury" },
]);
const computedList = computed(() => list.value.filter((item) => item.msg.includes(query.value)));
const beforeEnter = (el) => {
  el.style.opacity = 0;
  el.style.height = 0;
};
const enter = (el,done) => {
  console.log(el,"789666")
  gsap.to(el, {
    opacity: 1,
    height: "1.6em",
    delay: el.dataset.index * 0.15,
    onComplete: done,
  });
};
const leave = (el,done) => {
  gsap.to(el, {
    opacity: 0,
    height: 0,
    delay: el.dataset.index * 0.15,
    onComplete: done,
  });
};
</script>

<style scoped></style>
